<div class="osc-file-input">
  <div ng-attr-id="{{dropMessageID}}" class="drag-and-drop-zone">
    <p>Drop file here</p>
  </div>
  <div class="input-group">
    <input
        type="text"
        class="form-control"
        ng-model="fileName"
        readonly
        ng-show="supportsFileUpload"
        ng-disabled="disabled"
        ng-attr-aria-describedby="{{helpText ? helpID : undefined}}">
    <span class="input-group-btn">
      <span class="btn btn-default btn-file" ng-show="supportsFileUpload" ng-attr-disabled="{{ (disabled || readonly) || undefined }}">
        Browse&hellip;
        <input type="file" ng-disabled="disabled || readonly" class="form-control">
      </span>
    </span>
  </div>
  <div ng-if="helpText">
    <span ng-attr-id="{{helpID}}" class="help-block">{{::helpText}}</span>
  </div>
  <div class="has-error" ng-show="uploadError">
    <span class="help-block">There was an error reading the file. Please copy the file content into the text area.</span>
  </div>
  <textarea class="form-control"
      rows="5"
      ng-show="(showTextArea && !isBinaryFile) || !supportsFileUpload"
      ng-model="model"
      ng-required="required"
      ng-disabled="disabled"
      ng-readonly="readonly"
      autocorrect="off"
      autocapitalize="none"
      spellcheck="false"
      ng-attr-aria-describedby="{{helpText ? helpID : undefined}}">
  </textarea>
  <a href="" ng-show="(model || fileName) && !disabled && !readonly && !hideClear" ng-click="cleanInputValues()">Clear Value</a>
</div>
